<template>
	<div :id="id" :style="style"></div>
</template>
<script>
	import echarts from 'echarts/lib/echarts';
	import "echarts/lib/chart/bar";
	import 'echarts/lib/component/tooltip';
	import 'echarts/lib/component/title';
	import 'echarts/lib/component/legend';
	export default {
		name: "Chart",
		data() {
			return {
				//echarts实例
				chart: ""
			};
		},
		watch: {
			//观察option的变化
			option: {
				handler(newVal, oldVal) {
					if (this.chart) {
						if (newVal) {
							this.chart.setOption(newVal);
						} else {
							this.chart.setOption(oldVal);
						}
					} else {
						// this.init();
					}
				},
				deep: true //对象内部属性的监听，关键。
			}
		},
		props: {
			//父组件需要传递的参数：id，width，height，option
			id: {
				type: String
			},
			width: {
				type: String,
				default: "100%"
			},
			height: {
				type: String,
				default: "300px"
			},
			option: {
				type: Object,
				//Object类型的prop值一定要用函数return出来，不然会报错。原理和data是一样的，
				//使用闭包保证一个vue实例拥有自己的一份props
				default () {
					return {
						title: { //标题
							text: '上周收入来源',
							show: false,
							   textStyle: {
							            color: "#fff", // 主标题文字的颜色。
							            fontStyle: "normal", // 主标题文字字体的风格。 'normal'  'italic'  'oblique'
							            fontWeight: "normal", // 主标题文字字体的粗细。 'normal' 'bold'  'bolder'  'lighter' 500|600
										},
							   textAlign: "auto",
						},
						tooltip: {
							axisPointer: { // 坐标轴指示器，坐标轴触发有效
								type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
							}
						},
						legend: {
							data: ['股票', '基金', '期货', '房贷'],
							top: '10%',
							textStyle:{//图例文字的样式
							            color:'#ccc',
							            fontSize:16
							        }
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						yAxis: {
							type: 'value',
							axisLabel: {
								show: true,
								textStyle: {
									color: '#fff'
								}
							},
							 axisLine: {
							        lineStyle: {
							            color: '#fff', // 颜色
							            width: 1 // 粗细
							        }
							    }
						},
						xAxis: {
							type: 'category',
							data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
							 axisLine: {
							        lineStyle: {
							            color: '#fff', // 颜色
							            width: 1 // 粗细
							        }
							    },
							axisLabel: {
								show: true,
								textStyle: {
									color: '#fff'
								}
							}
						},
						series: [{
								name: '股票',
								type: 'bar',
								barWidth: '30px',
								stack: '总量',
								label: {
									normal: {
										show: true,
										position: 'insideRight'
									}
								},
								itemStyle: {
								  normal: {
								    barBorderRadius: 5,
								    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								      { offset: 0, color: "rgba(156,107,21,0.8)" },
								      { offset: 0.2, color: "rgba(156,107,21,0.5)" },
								      { offset: 1, color: "rgba(156,107,21,0.2)" }
								    ])
								  }
								},
								data: [520, 502, 501, 554, 590, 550, 520]
							},
							{
								name: '基金',
								type: 'bar',
								barWidth: '30px',
								stack: '总量',
								label: {
									normal: {
										show: true,
										position: 'insideRight'
									}
								},
								itemStyle: {
								  normal: {
								    barBorderRadius: 5,
								    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								      { offset: 0, color: "rgba(156,17,211,0.8)" },
								      { offset: 0.2, color: "rgba(156,17,211,0.5)" },
								      { offset: 1, color: "rgba(156,17,211,0.2)" }
								    ])
								  }
								},
								data: [820, 552, 401, 654, 990, 650, 770]
							},

							{
								name: '期货',
								barWidth: '30px',
								type: 'bar',
								stack: '总量',
								label: {
									normal: {
										show: true,
										position: 'insideRight'
									}
								},
								itemStyle: {
								  normal: {
								    barBorderRadius: 5,
								    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								      { offset: 0, color: "rgba(156,107,211,0.8)" },
								      { offset: 0.2, color: "rgba(156,107,211,0.5)" },
								      { offset: 1, color: "rgba(156,107,211,0.2)" }
								    ])
								  }
								},
								data: [750, 412, 401, 554, 590, 550, 410]
							},
							{
								name: '房贷',
								barWidth: '30px',
								type: 'bar',
								stack: '总量',
								label: {
									normal: {
										show: true,
										position: 'insideRight'
									}
								},
								itemStyle: {
								  normal: {
								    barBorderRadius: 5,
								    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								      { offset: 0, color: "rgba(16,107,211,0.8)" },
								      { offset: 0.2, color: "rgba(16,107,211,0.5)" },
								      { offset: 1, color: "rgba(16,107,211,0.2)" }
								    ])
								  }
								},
								data: [820, 852, 901, 954, 690, 550, 777]
							},

						]
					};
				}
			}
		},
		computed: {
			style() {
				return {
					height: this.height,
					width: this.width
				};
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				var getid = document.getElementById(this.id)
				this.chart = echarts.init(getid);
				this.chart.setOption(this.option);
				window.addEventListener("resize", this.chart.resize);
			}
		}
	};
</script>
